﻿
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="@ViewBag.Theme">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>@ViewBag.Title</title>
    <meta name="description" content="@ViewBag.description">
    <meta name="keywords" content="@ViewBag.keywords">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" type="image/png" href="/images/qingcai.jpg">
    <link rel="stylesheet" href="/css/amazeui.min.css" />
    <link href="~/css/joke.css?v170505" rel="stylesheet" />
    <script src="~/Scripts/vue.min.js"></script>
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    @RenderSection("Head", false)
</head>
<body >
    <header class="am-topbar am-topbar-fixed-top">
        <div class="am-container">
            <h1 class="am-topbar-brand am-margin-right-lg">
                <a href="/">
                    <img src="../images/qingcai.jpg" height="35" />&nbsp;搞笑部落
                </a>
            </h1>
            <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only am-hide"
                    data-am-collapse="{target: '#collapse-head'}">
                <span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
            </button>
            <div class="am-collapse am-topbar-collapse" id="collapse-head">
                <ul class="am-nav am-nav-pills am-topbar-nav am-hide-sm-only">
                    <li><a href="@Url.Action("Index", "Joke", new { type = 0 })">首页</a></li>
                    <li><a href="@Url.Action("Index", "Joke", new { type = 1 })">文字</a></li>
                    <li><a href="@Url.Action("Index", "Joke", new { type = 2 })">图片</a></li>
                    <li><a href="@Url.Action("Index", "Joke", new { type = 3 })">视频</a></li>
                </ul>
                <div class="am-topbar-right am-hide" id="mpNoLogin">
                    <a id="mpRegister" href="register.aspx" class="am-btn am-btn-primary am-topbar-btn am-btn-sm"><span class="am-icon-user"></span>登录/注册</a>
                </div>
                <div class="am-topbar-right am-hide" id="mpLogin">
                    <a href="usercenter.aspx" class="am-btn am-btn-primary am-topbar-btn am-btn-sm"><span class="am-icon-gear"></span>签到</a>
                    <a href="#" class="am-btn am-btn-secondary am-topbar-btn am-btn-sm"><span class="am-icon-pencil"></span>扒一下</a>
                    <a href="usercenter.aspx" class="am-btn am-btn-primary am-topbar-btn am-btn-sm"><span class="am-icon-gear"></span>个人中心</a>
                    <a onclick="logout();" class="am-btn am-btn-default am-topbar-btn am-btn-sm"><span class="am-icon-sign-out"></span>退出</a>
                </div>
            </div>
        </div>
    </header>

    <nav class="am-show-sm-only">
        <ul class="web-nav web-nav-fixed am-g">
            <li class="am-u-sm-3"><a href="@Url.Action("Index", "Joke", new { type = 0 })">首页</a></li>
            <li class="am-u-sm-3"><a href="@Url.Action("Index", "Joke", new { type = 1 })">文字</a></li>
            <li class="am-u-sm-3"><a href="@Url.Action("Index", "Joke", new { type = 2 })">图片</a></li>
            <li class="am-u-sm-3"><a href="@Url.Action("Index", "Joke", new { type = 3 })">视频</a></li>
        </ul>
    </nav>
    <div id="mainWarp"  class="am-container am-padding-top">
        <p class="am-show-sm-only">&nbsp;</p>
        <div class="am-panel am-panel-default admin-sidebar-panel" id="divNotice" style="display: none;">
            <div class="am-panel-bd am-text-sm">
                <p class="am-margin-0"><span class="am-icon-tag"></span>公告</p>
                <p class="am-margin-0" id="divNoticeContent"></p>
            </div>
        </div>
        <div class="am-g am-cf">
            <div class="am-u-sm-12 am-u-md-8 am-padding-bottom-lg">
                @RenderBody()
            </div>
            <div class="am-u-sm-12 am-u-md-4" id="jokeSidebar" v-cloak v-bind:class="{'am-hide':bodyHide}">
                <div class="am-padding  am-hide-sm-only" style="background-color: #fff;">
                    <h3 class="am-margin-bottom-xs">关注公众号，每天接收最新最搞笑的笑话</h3>
                    <img title="公众号" class="am-thumbnail" style="max-width: 150px;" src="../images/wechat.png" />
                    <p class="am-text-sm am-margin-top-0">或搜索公众号：搞笑必须认真的</p>
                </div>
                <div class="am-padding-top am-margin-top-sm" style="background-color: #fff;">
                    <h2 class="am-margin-bottom-xs  tuijian-title">
                        搞笑图片
                        <span @@click="loadNewPic" class="am-fr am-margin-right-lg">
                            <span class="am-icon-refresh" v-bind:class="{'am-icon-spin':isPicLoading}"></span>
                            <small>换一批</small>
                        </span>
                    </h2>
                    <div class="am-g am-padding am-padding-top-0">
                        <a v-for="pic in picList" v-bind:href="'@Url.Action("Detail", "Joke", new { type=2 })&id='+pic.Id">
                            <div class="am-u-sm-6 am-padding-xs">
                                <div class="tuijian-pic" v-bind:style="{backgroundImage:'url('+pic.Content+')' }"></div>
                                <div class="tuijian-pic-txt">{{pic.Title}}</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="am-padding-top am-margin-top-sm am-margin-bottom" style="background-color: #fff;">
                    <h2 class="am-margin-bottom-xs  tuijian-title">
                        笑话精选
                        <span @@click="loadNewText" class="am-fr am-margin-right-lg">
                            <span class="am-icon-refresh" v-bind:class="{'am-icon-spin':isTextLoading}"></span>
                            <small>换一批</small>
                        </span>
                    </h2>
                    <div class="am-cf am-text-sm">
                        <ul class="am-list joke-tuijian-txtlist">
                            <li v-for="txt in textList">
                                <a v-bind:href="'@Url.Action("Detail", "Joke", new { type=1 })&id='+txt.Id">{{txt.Title}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--foot-->
    <footer class="web-copy am-text-sm">
        <div class="am-container">
            <ul class="am-avg-sm-4">
                <li><a href="#">关于我们</a></li>
                <li><a href="#">免责申明</a></li>
                <li><a href="#">联系我们</a> </li>
                <li><a href="#">友情链接</a> </li>
            </ul>
        </div>
        <p class="am-text-center ">
            See 2 eyes简称C2Rs！！！
            <br />
            Copyright&nbsp;@DateTime.Now.Year www.See2Eyes.cn All Rights Reserved | 苏ICP备16006013号-1
        </p>
    </footer>

    <!--滚到顶部-->
    <a data-am-smooth-scroll="{position: 0, speed: 800}" class="am-btn am-btn-danger web-totop">
        <span class="am-icon-angle-double-up am-text-lg"></span>
        <p class="am-margin-0 am-text-xs">置顶</p>
    </a>
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                系统消息
            </div>
            <div class="am-modal-bd">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                正在载入...
            </div>
            <div class="am-modal-bd">
                <span class="am-icon-spinner am-icon-spin"></span>
            </div>
        </div>
    </div>

    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/amazeui.min.js"></script>

    <script src="~/Scripts/joke.js?v12120127"></script>
    <script>
        var appSidebar = new Vue({
            el: '#jokeSidebar',
            data: {
                textList: [],
                picList: [],
                isTextLoading: false,
                isPicLoading: false,
                bodyHide: true
            },
            methods: {
                //加载数据
                loadRandomData: function (type) {
                    var self = this;
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("RandomSidebar")",
                        dataType: "json",
                        data: "type=" + type,
                        success: function (result) {
                            console.log(result);
                            if (result.state == "success") {
                                if (type == 1)
                                    self.textList = result.jokes;
                                else
                                    self.picList = result.jokes;
                            }
                        },
                        beforeSend: function () {
                            if (type == 1)
                                self.isTextLoading = true;
                            else
                                self.isPicLoading = true;
                        },
                        complete: function () {
                            if (type == 1)
                                self.isTextLoading = false;
                            else
                                self.isPicLoading = false;
                        }
                    });
                },
                loadNewText: function () {
                    if (!this.isTextLoading)
                        this.loadRandomData(1);
                },
                loadNewPic: function () {
                    if (!this.isPicLoading)
                        this.loadRandomData(2);
                },
            },
            mounted: function () {
                this.$nextTick(function () {
                    this.loadRandomData(1);
                    this.loadRandomData(2);
                    this.bodyHide = false;
                })
                $("#mainWarp").show();
            }
        })

    </script>
    @RenderSection("Scripts", false)
    <script>
        //百度自动推送
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>
    <script>
        //百度统计
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?595899fcae1856f265cb45aea57af2c1";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


</body>
</html>
